<template>
    <div id="rightcont1">
        <el-row style="border: 0">
            <el-col :span="16" :xs="24">
                <el-col :span="6" :xs="14" :style="Pstyle1">
                    <img :style="Imgborder1" src="../../assets/sheying.webp" alt="">
                </el-col>
                <el-col :span="18" :xs="10" :style="Pstyle3">
                    <router-link to=""><h2 style="font-size: 21px">摄影</h2></router-link>
                    <p class="hidden-xs-only" :style="fontStyle1">
                        <router-link to="" style="color: #2D93CA">简书</router-link>
                        编 · 收录了153270篇文章 · 3063179人关注
                    </p>
                </el-col>
                <el-col :span="24" class="hidden-sm-and-up" style="margin-top: 20px">
                    <p :style="fontStyle1">
                        <router-link to="" style="color: #2D93CA">简书</router-link>
                        编 · 收录了153270篇文章 · 3063179人关注
                    </p>
                </el-col>
            </el-col>
            <el-col :span="8" :xs="24">
                <el-button style="border-radius: 50px;margin-top: 10px" type="success" plain>
                    投稿
                </el-button>
                <el-button style="border-radius: 50px;margin-top: 10px" type="success" plain>
                    专题主页<i class="el-icon-arrow-right"></i>
                </el-button>
            </el-col>
        </el-row>
        <div class="layui-tab layui-tab-brief tuijian">
            <ul class="layui-tab-title">
                <li class="layui-this"><b>全部推荐</b></li>
                <li><b><i class="el-icon-s-custom"></i>推荐作者</b></li>
                <li class=" hidden-xs-only"><b><i class="el-icon-menu"></i>推荐专题</b></li>
            </ul>
            <div class="layui-tab-content">
                <!--                全部推荐-->
                <div class="layui-tab-item layui-show">

                    <el-row class="yd-tjzhuanti">
                        <el-col :span="24">
                            <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
                        </el-col>
                        <el-col :span="16" :xs="13">
                            <el-col :span="4" :xs="14" :style="Pstyle1">
                                <img :style="Imgborder" src="../../assets/sheying.webp" alt="">
                            </el-col>
                            <el-col :span="20" :xs="10" :style="Pstyle">
                                <router-link to=""><h2>摄影</h2></router-link>
                                <p class="hidden-xs-only" :style="fontStyle">生活本无趣 光影挽留年 用图片 说故事 记录生活 记...</p>
                                <router-link class="hidden-xs-only" to="" :style="fontStyle"><i class="el-icon-menu">116.3K篇文章
                                    · 2363.7K人关注</i></router-link>
                            </el-col>
                        </el-col>
                        <!--关注按钮-->
                        <el-col :span="6" :xs="9" :offset="2">
                            <button class="guanzhuBtn" style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                                    v-if="IsShows" @click="changeCase1">
                                +关注
                            </button>
                            <div class="yiguanzhuBtn"  v-else>
                                <button style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                                    <i class="el-icon-check"></i>已关注
                                </button>
                                <button class="qxguanzhuBtn" @click="changeCase1">
                                    取消关注
                                </button>
                            </div>
                        </el-col>
                        <el-col :span="24" class="hidden-sm-and-up">
                            <p :style="fontStyle">生活本无趣 光影挽留年 用图片 说故事 记录生活 记...</p>
                            <router-link to="" :style="fontStyle"><i class="el-icon-menu">116.3K篇文章 · 2363.7K人关注</i>
                            </router-link>
                        </el-col>
                    </el-row>

                    <div v-for="(index,i) in goods">
                        <el-row class="yd-tjzhuanti">
                            <el-col :span="24">
                                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
                            </el-col>
                            <el-col :xs="24" class="hidden-sm-and-up">
                                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                            </el-col>
                            <el-col :span="16" :xs="13">
                                <el-col :span="4" :xs="14" :style="Pstyle1">
                                    <img :style="Imgborder" :src="index.picInfo[0].url" alt="">
                                </el-col>
                                <el-col :span="20" :xs="10" :style="Pstyle">
                                    <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                                    <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                                    <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                                            class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                                    </router-link>
                                </el-col>
                            </el-col>
                            <!--关注按钮-->
                            <el-col :span="6" :xs="9" :offset="2">
                                <button class="guanzhuBtn" style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                                        v-show="index.tag" @click="changeCase(i)">
                                    +关注
                                </button>
                                <div class="yiguanzhuBtn"  v-show="!index.tag">
                                    <button style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                                        <i class="el-icon-check"></i>已关注
                                    </button>
                                    <button class="qxguanzhuBtn" @click="changeCase(i)">
                                        取消关注
                                    </button>
                                </div>
                            </el-col>
                            <!--移动-->
                            <el-col :span="24" class="hidden-sm-and-up">
                                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                                <p :style="fontStyle">{{index.digest}}</p>
                                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                                    2363.7K人关注 / {{index.ptime}}</i>
                                </router-link>
                            </el-col>
                        </el-row>
                    </div>

                    <button :style="readMore">阅读更多</button>
                </div>
                <!--                推荐作者-->
                <div class="layui-tab-item">
                    <div v-for="(index,o) in goods2">
                        <el-row class="yd-tjzhuanti">
                            <el-col :span="24">
                                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
                            </el-col>
                            <el-col :xs="24" class="hidden-sm-and-up">
                                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                            </el-col>
                            <el-col :span="16" :xs="13">
                                <el-col :span="4" :xs="14" :style="Pstyle1">
                                    <img :style="Imgborder" :src="index.picInfo[0].url" alt="">
                                </el-col>
                                <el-col :span="20" :xs="10" :style="Pstyle">
                                    <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                                    <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                                    <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                                            class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                                    </router-link>
                                </el-col>
                            </el-col>
                            <!--关注按钮-->
                            <el-col :span="6" :xs="9" :offset="2">
                                <button class="guanzhuBtn" style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                                        v-show="index.tag" @click="changeCase2(o)">
                                    +关注
                                </button>
                                <div class="yiguanzhuBtn"  v-show="!index.tag">
                                    <button style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                                        <i class="el-icon-check"></i>已关注
                                    </button>
                                    <button class="qxguanzhuBtn" @click="changeCase2(o)">
                                        取消关注
                                    </button>
                                </div>
                            </el-col>
                            <!--移动-->
                            <el-col :span="24" class="hidden-sm-and-up">
                                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                                <p :style="fontStyle">{{index.digest}}</p>
                                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                                    2363.7K人关注 / {{index.ptime}}</i>
                                </router-link>
                            </el-col>
                        </el-row>
                    </div>

                    <button :style="readMore">阅读更多</button>
                </div>
                <!--                推荐专题-->
                <div class="layui-tab-item">
                    <div v-for="(index,s) in goods3">
                        <el-row class="yd-tjzhuanti">
                            <el-col :span="24">
                                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
                            </el-col>
                            <el-col :xs="24" class="hidden-sm-and-up">
                                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                            </el-col>
                            <el-col :span="16" :xs="13">
                                <el-col :span="4" :xs="14" :style="Pstyle1">
                                    <img :style="Imgborder" :src="index.picInfo[0].url" alt="">
                                </el-col>
                                <el-col :span="20" :xs="10" :style="Pstyle">
                                    <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                                    <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                                    <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                                            class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                                    </router-link>
                                </el-col>
                            </el-col>
                            <!--关注按钮-->
                            <el-col :span="6" :xs="9" :offset="2">
                                <button class="guanzhuBtn" style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                                        v-show="index.tag" @click="changeCase3(s)">
                                    +关注
                                </button>
                                <div class="yiguanzhuBtn"  v-show="!index.tag">
                                    <button style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                                        <i class="el-icon-check"></i>已关注
                                    </button>
                                    <button class="qxguanzhuBtn" @click="changeCase3(s)">
                                        取消关注
                                    </button>
                                </div>
                            </el-col>
                            <!--移动-->
                            <el-col :span="24" class="hidden-sm-and-up">
                                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                                <p :style="fontStyle">{{index.digest}}</p>
                                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                                    2363.7K人关注 / {{index.ptime}}</i>
                                </router-link>
                            </el-col>
                        </el-row>
                    </div>

                    <button :style="readMore">阅读更多</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'rightcont1',
        data() {
            return {
                IsShows:false,
                goods: '',
                goods2: '',
                goods3: '',
                i: -1,
                fontStyle: {
                    fontSize: '12px',
                    color: '#969696'
                },
                fontStyle1: {
                    fontSize: '14px',
                    color: '#969696'
                },
                Imgborder: {
                    borderRadius: '5px',
                    width: '52px',
                    height: '52px'
                },
                Imgborder1: {
                    borderRadius: '8px',
                    width: '80px',
                    height: '80px'
                },
                Pstyle: {
                    lineHeight: '28px'
                },
                Pstyle3: {
                    lineHeight: '40px'
                },
                Pstyle1: {
                    lineHeight: '58px',
                },
                Pstyle2: {
                    margin: '10px 0 10px 0',
                    fontSize: '12px',
                    color: '#ec6e56'
                },
                readMore: {
                    width: '100%',
                    backgroundColor: '#a5a5a5',
                    color: '#fff',
                    fontSize: '15px',
                    border: '0',
                    borderRadius: '50px',
                    margin: '30px 0 30px 0',
                    padding: ' 8px 0 8px 0'
                }
            }
        },
        methods: {
            changeCase1(){
                this.IsShows=!this.IsShows
            },
            changeCase(i) {
                this.goods[i].tag = !this.goods[i].tag;
            },
            changeCase2(o) {
                this.goods2[o].tag = !this.goods2[o].tag;
            },
            changeCase3(s) {
                this.goods3[s].tag = !this.goods3[s].tag;
            },
            guanzhu() {
                // 调用API获取数组https://www.apiopen.top/journalismApi
                this.axios.get('/moock/news.json').then((response) => {
                    this.goods = response.data.data.war;
                    this.goods2 = response.data.data.auto;
                    this.goods3 = response.data.data.sports;
                    /* 给所取api内容字段tag设置true/false,来实现关注按钮切换 */
                    // for (a = 0; a < this.cont.length; a++) {
                    //     this.cont[a].tag = true;
                    //     console.log(this.cont[a].tag)
                    // };
                    // for (i = 0; i < this.goods.length; i++) {
                    //     this.goods[i].tag = true;
                    //     console.log(!this.goods[i].tag)
                    // };
                    // for (o = 0; o < this.goods2.length; o++) {
                    //     this.goods2[o].tag = true;
                        // console.log(!this.goods[i].tag)
                    // };
                    // for (s = 0; s < this.goods3.length; s++) {
                    //     this.goods3[s].tag = true;
                        // console.log(!this.goods[i].tag)
                    // };

                })
            }
        },
        mounted: function () {
            this.guanzhu();
        }
    }
</script>

<style scoped>
    #rightcont1 .tuijian li {
        /*padding: 13px 20px;*/
        font-size: 15px;
        font-weight: 900;
        /*color: #969696;*/
        /*line-height: 25px;*/
    }

    #rightcont1 h2 {
        color: #333333;
        font-size: 15px;
        font-weight: 700;
    }

    .el-row {
        padding: 10px 0 10px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .guanzhuBtn:hover {
        background-color: #42c02e !important;
        color: #fff !important;
    }

    .yiguanzhuBtn {
        width: 98px;
        z-index: 55;
    }

    .qxguanzhuBtn {
        position: absolute;
        margin-top: -34px;
        border-radius: 50px;
        padding: 7px 20px 7px 20px;
        width: 98px;
        border: 1px solid #b3b3b3;
        background-color: #f0f9eb !important;
        color: #969696;
        display: none
    }

    .yiguanzhuBtn:hover .qxguanzhuBtn {
        display: block;
    }


    @media screen and(max-width: 750px) {
        #rightcont1 .tuijian {
            width: 50%;
        }

        #rightcont1 .tuijian ul > li {
            /*margin-bottom: 50px;*/
        }
    }
</style>
